<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <label>String A:
            <input id="radio-a" type="radio" checked="true" name="str-obj" value="a">
        </label>
        <textarea id="str-a"></textarea>
        <label>String B:
            <input id="radio-b" type="radio" name="str-obj" value="b">
        </label>
        <textarea id="str-b"></textarea>
        <label>Num A：<input id="num-a" type="number" value="0"></label>
        <label>Num B：<input id="num-b" type="number" value="1"></label>
    </div>
    <div>
        <button>获取当前选中输入的内容长度</button>
        <button>当前选中输入中的第3个字符</button>
        <button>把两个输入框的文字连接在一起输出（concat）</button>
        <button>输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
        <button>输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
        <button>使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
        <button>当前选中输入框的行数</button>
        <button>使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
        <button>把所选输入框中的内容全部转为大写</button>
        <button>把所选输入框中的内容全部转为小写</button>
        <button>把所选输入框中内容的半角空格全部去除</button>
        <button>把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
    </div>
    <p id="result"></p>
    <script>
        var strs = document.getElementsByName('str-obj');
        var p = document.getElementById('result');
        var btns = document.querySelectorAll('button');

        function getSelectedInput() {
            for (let i = 0, len = strs.length; i < len; i++) {
                if (strs[i].checked === true) {
                    let text = document.getElementById('str-' + strs[i].value).value;
                    return text;
                }
            }
        }
        btns[0].onclick = function() {
            p.innerHTML = getSelectedInput().length;
        }
        btns[1].onclick = function() {
            p.innerHTML = getSelectedInput().charAt(2);
        }
        btns[2].onclick = function() {
            p.innerHTML = '';
            for (let i = 0, len = strs.length; i < len; i++) {
                p.innerHTML += document.getElementById('str-' + strs[i].value).value;
            }
        }

        btns[3].onclick = function() {
            let strA = document.getElementById('str-a').value;
            let strB = document.getElementById('str-b').value;
            console.log(strA, strB)
            p.innerHTML = strA.indexOf(strB);
        }
        btns[4].onclick = function() {
            let strA = document.getElementById('str-a').value;
            let strB = document.getElementById('str-b').value;
            console.log(strA, strB)
            p.innerHTML = strB.lastIndexOf(strA);
        }
        btns[5].onclick = function() {
                let num1 = document.getElementById('num-a').value;
                let num2 = document.getElementById('num-b').value;
                p.innerHTML = getSelectedInput().slice(num1, num2);
            }
            //todo
        btns[6].onclick = function() {
            for (let i = 0, len = strs.length; i < len; i++) {
                if (strs[i].checked === true) {
                    var text = document.getElementById('str-' + strs[i].value);
                    console.log(text.cols)
                    p.innerHTML = Math.ceil(text.value.length / text.cols);
                }
            }
        }
        btns[7].onclick = function() {
            let num1 = document.getElementById('num-a').value;
            let num2 = document.getElementById('num-b').value;
            p.innerHTML = getSelectedInput().substr(num1, num2);
        }
        btns[8].onclick = function() {
            p.innerHTML = getSelectedInput().toUpperCase();
        }
        btns[9].onclick = function() {
            p.innerHTML = getSelectedInput().toLowerCase();
        }
        btns[10].onclick = function() {
            p.innerHTML = getSelectedInput().replace(/\s*/g, '')
        }
        btns[11].onclick = function() {
            for (let i = 0, len = strs.length; i < len; i++) {
                if (strs[i].checked === true) {
                    document.getElementById('str-' + strs[i].value).value = document.getElementById('str-' + strs[(i + 1 % 32)].value).value
                }
            }
        }
    </script>
</body>

</html>